<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Danh sách website</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{siteBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!siteBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <h:form id="mainForm">
            <p:panel header="Danh sách website">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Tạo mới" actionListener="#{siteBean.preNewAction()}" onclick="addSiteDialog.show();"/>
                        <p:commandButton value="Xóa" actionListener="#{siteBean.preDeleteAction()}" update="mainForm:deleteMsgs" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />
                        </p:menuButton>  
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:dataTable var="site" value="#{siteBean.siteList}" paginator="true" rows="10"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                             rowsPerPageTemplate="10,20,30" rowKey="#{site.id}" editable="true"
                             selection="#{siteBean.selectedSites}">
                    <f:facet name="header">Danh sách website</f:facet>
                    <p:ajax event="rowEdit" listener="#{siteBean.siteRowEditListener}"/>
                    <p:column selectionMode="multiple" />
                    <p:column headerText="Tên website">
                        <p:cellEditor>
                            <f:facet name="output"><h:outputText value="#{site.name}"/></f:facet>
                            <f:facet name="input"><p:inputText value="#{site.name}"/></f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column headerText="Ngày đăng ký">
                        <h:outputText value="#{utilBean.formatDate(site.createdDate, 'dd/MM/yyyy HH:mm')}"/>
                    </p:column>
                    <p:column headerText="Trạng thái">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="Activated" rendered="#{site.activated}"/>
                                <h:outputText value="InActivate" rendered="#{!site.activated}"/>
                            </f:facet>
                            <f:facet name="input">
                                <p:selectBooleanCheckbox value="#{site.activated}" />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column headerText="Người tạo">
                        <h:outputText value="#{site.user.username}"/>
                    </p:column>
                    <p:column headerText="Chức năng" style="width: 50px;">
                        <p:rowEditor />
                    </p:column>
                </p:dataTable>
                
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Tạo mới" actionListener="#{siteBean.preNewAction()}" onclick="addSiteDialog.show();"/>
                        <p:commandButton value="Xóa" actionListener="#{siteBean.preDeleteAction()}" update="mainForm:deleteMsgs" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />
                        </p:menuButton>  
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:dialog header="Thông báo" widgetVar="deleteDialog" width="250" showEffect="explode" hideEffect="explode">  
                    <p:dataList id="deleteMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                        <h:outputText value="#{msg.summary}"/>
                    </p:dataList>
                </p:dialog>
                
                <p:confirmDialog message="Bạn có muốn xóa site?" appendToBody="true"
                                 header="Thông báo" severity="alert" widgetVar="deleteConfirm">  
                    <p:commandButton value="Có" oncomplete="deleteConfirm.hide()" update="mainForm"
                                     actionListener="#{siteBean.deleteAction()}" />  
                    <p:commandButton value="Không" onclick="deleteConfirm.hide()" type="button" />                     
                </p:confirmDialog>
                
                <script type="text/javascript">
                   function handleDeleteRequest(xhr, status, args) {
                       if(args.validationFailed || args.invalid) {
                           deleteDialog.show();
                           jQuery('#dialog').effect("shake", { times:3 }, 100);  
                       } else {
                           deleteConfirm.show();
                       }
                   }  
                </script>
            </p:panel>
        </h:form>
        <h:form id="addSiteForm">
            <p:dialog header="Tạo mới site" widgetVar="addSiteDialog" resizable="false">
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="300px">                                         
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Tên site"/>
                    <p:inputText value="#{siteBean.site.name}" maxlength="100" required="true"
                                 label="Tên site" requiredMessage="Yêu cầu nhập tên site"/>
                        
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Kích hoạt"/>
                    <p:selectBooleanCheckbox value="#{siteBean.site.activated}" />
                        
                    <h:outputLabel value=""/>
                    <p:commandButton value="Lưu" update=":mainForm" oncomplete="addSiteDialog.hide();"
                                     actionListener="#{siteBean.saveAction()}"/>
                </h:panelGrid>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>
